<template>
	<scroll-view
	@scrolltolower="handletoLower"
	class="video_main"
	scroll-y
	enable-flex
	>
		<view class="video_item"
		v-for="item in videowp"
		:key="item.id"
		@click="handleGoVideo(item)"
		>
			<image :src="item.img" mode="widthFix"></image>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			urlobj: Object
		},
		data(){
			return{
				videowp:[],
				// 是否还有更多
				hasMore:true
			}
		},
		mounted() {
			// console.log(this.urlObj);
			this.getList()
		},
		// 组件的监视
		watch: {
			urlobj() {
				// console.log('参数发生了改变');
				// console.log(this.urlObj);
				
				this.videowp = []
				
				this.getList()
			}
		},
		methods: {
			async getList() {
				/* 
				 bug:页面切换请求得到的数据还是没有改变,点击切换页面的时候要watch清空数组再重新发起请求
				 */
				const result = await this.request({url:this.urlobj.url,data:this.urlobj.params})
				if(result.res.videowp.length === 0){
					this.hasMore = false
					uni.showToast({
					  title: '没有数据了',
					  icon: 'none',
					});
					return
				}
				this.videowp = [...this.videowp,...result.res.videowp]
				
				
				
			},
			// 处理去到的视频
			handleGoVideo(item){
				getApp().globalData.video = item
				uni.navigateTo({
					url:'/pages/videoPlay/index'
				})
			},
			// 处理分页
			 handletoLower() {
			      if (this.hasMore) {
			        this.urlobj.params.skip += this.urlobj.params.limit;
			        this.getList();
			      } else {
			        uni.showToast({
			          title: '没有数据了',
			          icon: 'none',
			        });
			      }
			    },
				
			
		}
	}
</script>

<style lang="scss" scoped>
	.video_main{
		display: flex;
		flex-wrap: wrap;
		height: calc(100vh - 36px);
		.video_item{
			width: 33.33%;
			border: 5rpx solid #FFFFFF;
		}

	}
</style>
